<template>
	<view class="bg-white">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="风险任务排查" @clickLeft="back" />
		<view class="container">
			<view class="solid-bottom">
				<scroll-view scroll-x class="bg-white nav text-center ">
					<view class="flex text-center justify-around">
						<view class="cu-item" :class="item.value==TabCur?'text-blue cur':''"
							v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="item.value">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view
						class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm margin-top-sm"
						style="width: 100vw;" v-for="(item,index) in msgList" :key="index"
						:class="modalName=='move-box-'+ index?'move-cur':''"
						@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
						:data-target="'move-box-' + index">
						
						<uni-card :title="item.riskUnitId_dictText" :extra="item.checkStatus_dictText" :thumbnail="avatar">
							<uni-row class="uni-row">
								<uni-col :span="24">
									<view class="demo-uni-col dark">管控措施:{{item.riskMeasureDesc}}</view>
								</uni-col>
								<uni-col :span="24">
									<view class="demo-uni-col dark">排查内容:{{item.troubleshootOntent}}</view>
								</uni-col>
								<uni-col :span="24">
									<view class="demo-uni-col dark">排查周期:{{item.period}}</view>
								</uni-col>
								<uni-col :span="24">
									<view class="demo-uni-col dark">周期单位:{{item.periodUnit_dictText}}</view>
								</uni-col>
								<uni-col :span="24">
									<view class="demo-uni-col dark">排查人:{{item.identifyPeople_dictText}}</view>
								</uni-col>
								<uni-col :span="24">
									<view class="demo-uni-col dark">任务开始时间:{{item.taskStartTime}}</view>
								</uni-col>
								<uni-col :span="24" v-if="TabCur == 1">
									<view class="demo-uni-col dark">排查时间:{{item.checkTime}}</view>
								</uni-col>
							</uni-row>
							<uni-row class="btn-uni-row">
								<uni-col :span="24">
									<button class="mini-btn" type="primary" size="mini" @click="normalSubmit(item)">正常</button>
									<button class="mini-btn" type="warn" size="mini" @click="abnormalSubmit(item)">异常</button>
								</uni-col>
							</uni-row>
						</uni-card>
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	const tabs = [{
		title: '排查任务',
		value: 0
	}, {
		title: '历史排查',
		value: 1
	}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor: this.NavBarColor,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示

					},
					loading: '',
					text: '全部',
					isShowNoMore: false,
					textNoMore: '我是有底线的 >_<'
				},
				msgList: [], //列表数据
				read: "all",
				announcement1: [],
				msg1Count: "",
				msg1Title: "",
				announcement2: [],
				msg2Count: "",
				msg2Title: "",
				url: {
					taskRecordList: "/TbBaseMeasuresTaskRecord/tbBaseMeasuresTaskRecord/list",
					editStatus: "/TbBaseMeasuresTaskRecord/tbBaseMeasuresTaskRecord/editStatus"
				},
				listTouchStart: 0,
				modalName: null,
				listTouchDirection: null,
				avatar: '/static/icon/PT-lanling-fang.png',
				riskUnitId: "",
			}
		},
		onShow() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			top() {
				return this.CustomBar * 2 + 95
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},
		onLoad(options){
			this.riskUnitId = options.riskUnitId;//赋值给全局的单元id
			this.upCallback(this.upOption.page); //初始化列表
		},
		methods: {
			upCallback(page) {
				//联网加载数据
				let keyword = this.TabCur
				if (keyword == 0) {
					this.$http.get(this.url.taskRecordList, {
						params: {
							pageNo: page.num,
							pageSize: page.size,
							identifyPeople: this.$store.getters.username,
							riskUnitId: this.riskUnitId,
							checkStatus: "2",
							column:'taskStartTime',order:'desc'
						}
					}).then(res => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;

						this.announcement1 = res.data.result.records
						this.mescroll.endSuccess(this.announcement1.length);
						//console.log("url", res)
						//设置列表数据
						if (res.data.success) {
							console.log("res", res.data)
							this.msg1Count = res.data.result.total
							this.msg1Title = "通知(" + res.data.result.total + ")";
							for (let annItem of this.announcement1) {
								this.msgList.push(annItem)
							}
						}
						if (page.num == 1) {
							this.msgList = []; //如果是第一页需手动制空列表
							this.msgList = this.msgList.concat(this.announcement1); //追加新数据
						}

					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
				if (keyword == 1) {
					this.$http.get(this.url.taskRecordList, {
						params: {
							pageNo: page.num,
							pageSize: page.size,
							identifyPeople: this.$store.getters.username,
							riskUnitId: this.riskUnitId,
							checkStatus: "0",
							column:'checkTime',order:'desc'
						}
					}).then(res => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						this.announcement2 = res.data.result.records
						this.mescroll.endSuccess(this.announcement2.length, this.msgCount);

						//设置列表数据
						if (res.data.success) {
							console.log("res sys", res.data)
							this.msg2Count = res.data.result.total
							this.msg2Title = "通知(" + res.data.result.total + ")";
							// this.announcement2.filter((item,index) => {
							// // console.log("item",item)
							//  if(item.anntId == this.announcement2[index+1].anntId){
							//   this.announcement2.splice(item,1)
							for (let item of this.announcement2) {
								this.msgList.push(item)
							}
							//   }
							// })
						}
						if (page.num == 1) {
							this.msgList = []; //如果是第一页需手动制空列表
							this.msgList = this.msgList.concat(this.announcement2); //追加新数据
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}

			},
			normalSubmit(record){//正常提交
				record.checkStatus = "0";
				record.checkTime = new Date().getTime();
				//record.mobileMe = this.imeiCode;//赋值imei码
				this.submit(record);
			},
			abnormalSubmit(record){//异常
				record.checkStatus = "1";
				record.checkTime = new Date().getTime();
				this.submit(record);
				uni.navigateTo({
					url: "../snapshot/snapshot"
				})
			},
			submit(record){
				this.$tip.loading();
				this.$http.put(this.url.editStatus,record).then(res => {
					this.$tip.loaded();
					if (res.data.success) {
						this.$tip.toast(res.data.result);
						this.msgList = []// 先置空列表,显示加载进度
						this.mescroll.resetUpScroll() // 再刷新列表数据
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.msgList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
		}
	}
</script>

<style scoped>
	.cu-list>.move-cur {
		transform: translateX(-150rpx);
	}
	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
	.btn-uni-row {
		margin-top: 5%;
	}
</style>